<template>
  <div class="labelpage">
    <div class="top">
      <p>
        <router-link v-for="(item,key) in list" :key='key' :to="item.path"> {{item.title}} </router-link>
      </p>
    </div>
    <div class="bot">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import {labelTitle} from '../../router/router.config'
export default { 
  data(){
    return {
      list: labelTitle(),
    }
  }
}
</script>

<style scoped lang = 'scss'>
.labelpage{
  width: 100%;
  background: #ffffff;
  .top{
    width: 100%;
    height:45px ;
    line-height: 41px;
    border-bottom: 1px solid #f1f1f1;
    p{
      width: 960px;
      margin: 0 auto;
      a{
        padding: 0 30px;
        font-weight: bold;
        float: left;
        font-size: 14px;
        &:hover{
          color: #007fff;
          border-bottom: 2px solid #007fff;
        }
      }
      .router-link-exact-active{
        color: #007fff;
        border-bottom: 2px solid #007fff;
      }
    }
  }
  .bot{
    width: 960px;
    margin: 0 auto;
  }
}

</style>